import React, { useEffect } from 'react';
import * as img from '../assets/image';
import { useNavigate } from 'react-router-dom';
import Store from './store';
import {  sendMessage,setvpnStore} from './utils';
import { Dialog } from 'antd-mobile';
export default function Line() {
    const { store } = Store.useContainer();
    const { currentLine, lineData, isLogin, vip, nodesChanged } = store;
    const navigate = useNavigate();
    const onGoBack = () => {
        navigate(-1);
    };
    const onRest = () => {
        sendMessage({func:"getNodes"})
    };

    const proxyCreate = async (line: any) => {
       return sendMessage({func:"createProxy",data: line})
    };

    const onSelect = async (item: any) => {
        if (item.Vip && !(isLogin && vip)) {
            Dialog.confirm({
                content: '当前为VIP线路，是否购买VIP',
                onConfirm: () => {
                    navigate('/product');
                },
            });
            return;
        }
        await setvpnStore({ currentLine: item });
        return await proxyCreate(item);
    };

    const vipRender = (Vip: boolean) => {
        if (Vip) {
            return <div className="line_vip">VIP</div>;
        }
        return null;
    };

    useEffect(() => {
        if (nodesChanged) {
            sendMessage({func:"getNodes"})
        }
    }, [nodesChanged]);

    return (
        <div className="line_bg">
            <div className="line_header">
                <img
                    className="line_back"
                    onClick={onGoBack}
                    src={img.icon_arrow_zuo}
                />
                <div className="line_title">
                    {currentLine.NodeName ? (
                        <>
                            <img
                                className="line_header_img"
                                src={currentLine.Icon}
                                width={24}
                                height={24}
                            />
                            {currentLine.NodeName}-{currentLine.LineName}
                        </>
                    ) : null}
                </div>
                <img
                    className="line_rest"
                    onClick={onRest}
                    src={img.icon_arrow_refash}
                />
            </div>

            <div className="line_list">
                {lineData.map((line: any) => {
                    return (
                        <div key={line.NodeName} className="line_list_group">
                            <div className="line_list_group_title">
                                <img
                                    className="line_list_group_img"
                                    src={line.Icon}
                                    width={24}
                                    height={24}
                                />
                                {line.NodeName}
                            </div>
                            {line.children.map((item: any) => {
                                return (
                                    <div
                                        key={item.Addr}
                                        className="line_list_item"
                                        onClick={() => onSelect(item)}
                                    >
                                        <img
                                            className="line_list_item_img"
                                            src={img.icon_zuobiao}
                                        />
                                        <div className="line_list_item_title">
                                            {item.LineName}{' '}
                                            {vipRender(item.Vip)}{' '}
                                        </div>
                                        <div className="line_list_item_check">
                                            {currentLine.Id === item.Id ? (
                                                <img
                                                    src={img.icon_arrow_gouxuan}
                                                />
                                            ) : null}
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                    );
                })}
            </div>
        </div>
    );
}
